<html style="height:100%; width: 100%; padding:0; border:0 none; margin: 0;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词详情</title>
<style>
.search-btn {
  width: 52px;
  height: 26px;
  background-color: #fe2742;
  border: none;
  border-radius: 4px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.search-btn span {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  display: block;
  position: relative;
}

.search-btn svg {
  fill: #ffffff;
  width: 100%;
  height:100%;
  vertical-align: top;
  box-sizing: border-box;
}

#arrowUp, #arrowDown {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

#arrowUp span, #arrowDown span {
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  position: relative;
  display: block;
}

#arrowUp svg, #arrowDown svg {
  fill: #27b148;
  height:100%;
  width:100%;
  vertical-align:top;
}

#arrowDown {
  transform: rotate(180deg);
}

#arrowDown svg {
  fill: #fe2742;
}

#minus {
  width: 24px;
  height: 24px;
  border: 0 none;
  display: flex;
  justify-content:center;
  align-items: center;
  display: none;
}

#mius span {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  position: relative;
  display: block;
}

#minus svg {
  fill: #101010;
  height: 100%;
  width: 100%;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  color: #505559;
}

tr {
  height: 38px;
  line-height: 38px;
  border-bottom: 1px solid #e1e3e6;
}

.show-mask {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
}

.show-mask span {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  position: relative;
  display: block;
}

.show-mask svg {
  fill: rgb(50, 145, 248);
  height: 100%;
  width: 100%;
  vertical-align: top;
}

#mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(16, 16, 16, 0.59);
  z-index: 1000000;
  display: none;
}

.mask-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask-content {
  background: #ffffff;
  text-align: center;
  width: 275px;
  height: 210px;
  border-radius: 4px;
  color: #505559;
  font-size: 14px;
  padding: 12px;
  padding-bottom: 0px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

#noyinlitu {
  width: 100%;
  color: #9f9f9f;
  font-size: 14px;
  justify-content: center;
  padding-top: 30px;
  display: none;
}

</style>
  </head>
  <body style="padding:0; border:0 none; margin: 0; overflow:hidden; position: absolute; top:0; left: 0; right:0; bottom:0;">
    <div style="position: absolute; top:0; left:0; right:0; bottom:0; overflow-y:scroll;" id="wtf">
      <div style="display: flex; align-items: center; height: 45px; line-height: 45px; color: #505559; font-size: 14px; justify-content: space-between; padding: 0 12px;">
        <div id="wordText"></div>
        <div style="display: flex; align-items: center;">
          <div id="numText" style="padding-right: 6px;"></div>
          <div style="width: 24px;">
            <div id="arrowUp">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="15" height="15">
                  <path d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"></path>
                </svg>
              </span>
            </div>
            <div id="arrowDown">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="15" height="15">
                  <path d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"></path>
                </svg>
              </span>
            </div>
            <div id="minus">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24">
                  <path d="M9.774 15.627h13.52v1.733h-13.52z"></path>
                </svg>
              </span>
            </div>
          </div>
        </div>
        <div>
          <div class="search-btn">
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="17" height="17">
                <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
              </svg>
            </span>
          </div>
        </div>
      </div>
      <div style="background-color: #f7f7f7; font-size: 14px; height: 30px; line-height: 30px; padding: 0 20px; display: flex; align-items: center;">
        <span>热度趋势</span>
        <div class="show-mask" onclick="document.getElementById('mask').style.display = 'inline'">
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path>
            </svg>
          </span>
        </div>
      </div>
      <div id="line" style="height: 250px; width: 100%;"></div>
      <div style="background-color: #f7f7f7; font-size: 14px; height: 30px; line-height: 30px; padding: 0 20px; display: flex; align-items: center;">
        <span>引力图谱</span>
        <div class="show-mask" onclick="document.getElementById('mask').style.display = 'inline'">
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path>
            </svg>
          </span>
        </div>
      </div>
      <div id="yinlitu">
        <div id="container" style="height: 350px;"></div>
        <div style="padding: 12px; padding-top: 0;">
          <table id="mytab">
            <thead>
              <tr style="color: #101010;">
                <th style="text-align: left;">引力词</th>
                <th>紧密度排行</th>
                <th style="text-align: right;">关联热篇</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      <div id="noyinlitu">没找到相关引力词！</div>
      <div id="mask">
        <div class="mask-wrap">
          <div class="mask-content">
            <div style="font-size: 16px;">数据说明</div>
            <div style="text-align: left;">
              <div style="padding-bottom: 10px;"><span style="color: 3291f8;">热度趋势：</span>时间段内，小红书热搜词相关笔记的互动量数据经一定权重汇总得出。</div>
              <div><span style="color: 3291f8;">引力图谱：</span>反应小红书用户在关键词前后的搜索行为中表现出来的相关搜索词需求，距圆心距离表示与关键词的相关性强度。</div>
            </div>
            <div>
              <div style="height: 1px; background: #e8e8e8;"></div>
              <div style="height: 38px; line-height: 38px;" onclick="document.getElementById('mask').style.display = 'none'">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
    <script>
// document.body.addEventListener('touchmove', function(evt) {
//     if(!evt._isScroller) {
//         evt.preventDefault();
//     }
// });
// //这个会完全禁止touchmove  导致内部无法滚动。
// document.body.addEventListener('touchmove', function (e) {
//   if (e._isScroller) { //过滤掉具有滚动容器的元素。
//     return;
//   }
//   var scroll = false;
//   e.path.forEach(obj => {
//     if (obj.id === 'wtf') {
//       scroll = true;
//       return false;
//     }
//   })
//
//   if (scroll) {
//     return;
//   }
//   e.preventDefault();
// }, {passive: false}); //passive 参数不能省略
      (function() {

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var lineChart = echarts.init(document.getElementById('line'));

var queryParam = {}

window.location.search.replace(new RegExp('([^?=&]+)(=([^&]*))?', 'g'), function ($a, $b, $c, $d) {
  queryParam[$b] = decodeURIComponent($d);
});

console.log(queryParam)

if (!queryParam.word) {
  return
}

try {
  queryParam.wordData = JSON.parse(queryParam.wordData)
  queryParam.wordCategory = JSON.parse(queryParam.wordCategory)
  queryParam.ywords = JSON.parse(queryParam.ywords)
} catch (e) {
  return
}

if (!Array.isArray(queryParam.wordData) || !Array.isArray(queryParam.wordCategory) || !Array.isArray(queryParam.ywords)) {
  return
}

document.getElementById('wordText').innerText = queryParam.word
document.getElementById('numText').innerText = queryParam.num
if (queryParam.icon == 1) {
  document.getElementById('arrowUp').style.display = 'flex'
} else if (queryParam.icon == 2) {
  document.getElementById('arrowDown').style.display = 'flex'
} else {
  document.getElementById('minus').style.display = 'flex'
}

var quanData = [
        {
          "value": [
            0,
            0,
            45,
            queryParam.word,
            "center",
            null,
            null,
            queryParam.word,
            "#fe2742",
            "center-scatter"
          ],
          "itemStyle": {
            "emphasis": {
              "color": "#fe2742"
            }
          },
          "label": {
            "normal": {
              "show": true,
              "color": "#ffffff",
              "fontSize": 16,
              "position": "inside",
              "formatter": queryParam.word
            }
          }
        }
];

function brand(min, max) {
  return Math.random() * (max - min) + min;
}

let sizeMap = {}
let sizes = [25, 23, 21, 19, 17, 15, 13, 11, 9, 8]
let tab = '';
for (var i = 0; i < queryParam.ywords.length; i++) {
  let yin = queryParam.ywords[i]
  if (i < 10) {
    if (sizeMap[yin[1]] === undefined) {
      sizeMap[yin[1]] = sizes.shift()
    }

    quanData.push({
        "value": [
          brand(18, 28),
          brand(i * 2.3, (i + 1) * 2.3),
          sizeMap[yin[1]],
          yin[0],
          "flow",
          null,
          null,
          yin[0],
          "#3DC8F7",
        ],
        "label": {
          "emphasis": false,
          "normal": {
            "show": true,
            "color": "#666",
            "position": "bottom",
            "formatter": yin[0]
          }
        }
    });
  } else {
    yin = [yin]
  }

  tab += "<tr><td>" + yin[0] + "</td><td style='text-align: center;'>" + (i + 1) + "</td><td><div style='display: flex; flex-direction: row-reverse;'><div class='search-btn' data-word='" + yin[0] + "'><span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='17' height='17'><path d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'></path></svg></span></div></div></td></tr>"
}

if (tab) {
  document.getElementById('mytab').tBodies[0].innerHTML = tab;
} else {
  document.getElementById('yinlitu').style.display = 'none';
  document.getElementById('noyinlitu').style.display = 'flex';
}

var btn = document.getElementsByClassName('search-btn');
var clickBtn = function () {
  var demandWord = this.getAttribute('data-word')
  if (demandWord === null) {
    demandWord = ''
  }

  wx.miniProgram.navigateTo({
    url: '/pages/index/searchDetail?keyword=' + encodeURIComponent(queryParam.word) + '&firstCategory=' + encodeURIComponent(queryParam.category) + '&demandWord=' + encodeURIComponent(demandWord)
  })
}

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', clickBtn, false);
}

if (queryParam.ywords.length) {
  myChart.setOption({
    "title": {
      "show": false
    },
    "polar": {
      "radius": 175,
      "center": [
        "50%",
        "52%"
      ]
    },
    "label": {
      "normal": {
        "show": true,
        "position": "top",
        "color": "#333333",
        "fontSize": 14,
        "formatter": function (t) {
          return t.value[9]
        }
      }
    },
    "tooltip": {
      "formatter": function (t) {return t.value[7]}
    },
    "angleAxis": {
      "type": "value",
      "boundaryGap": false,
      "interval": 1,
      "min": 0,
      "max": 24,
      "splitLine": {
        "show": false
      },
      "axisLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      },
      "axisLabel": {
        "show": false
      }
    },
    "radiusAxis": {
      "type": "value",
      "splitNumber": 4,
      "minInterval": 5,
      "maxInterval": 10,
      "min": 0,
      "max": 35,
      "splitLine": {
        "show": false
      },
      "splitArea": {
        "show": true,
        "areaStyle": {
          "color": [
            "#E9F1FE",
            "#E9F1FE",
            "#F7FAFE",
            "#FFFFFF"
          ]
        }
      },
      "axisLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      },
      "axisLabel": {
        "show": false
      }
    },
    "series": [
      {
        "type": "scatter",
        "coordinateSystem": "polar",
        "animationDelay": function (t) {return 5*t},
        "data": quanData,
        "animation": false,
        "name": queryParam.word,
        "symbolSize": function (t) {return 2*t[2]},
        "itemStyle": {
          "normal": {
            "color": function (t) { return t.value[8]}
          }
        }
      }
    ]
  }, true);
} else {
  // 显示没找到
}

lineChart.setOption({
  grid: {
    left: "10",
    right: "0",
    top: "20",
    bottom: "20",
    containLabel: false,
    show: false
  },
  xAxis: [{
    type: "category",
    data: queryParam.wordCategory,
    axisLabel: {
      textStyle: {
        color: "#9b9ca6",
        fontSize: 10
      },
      interval: "",
      showMaxLabel: true,
      showMinLabel: true
    },
    splitLine: {
      show: false
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "#fff"
      }
    }
  }],
  yAxis: [{
    type: "value",
    axisLabel: {
      textStyle: {
        baseline: "bottom",
        color: "#cdcdd1"
      },
      formatter: function(t) {
        if (t) {
          return t < 1e3 ? t : (t / 1e3).toFixed(0) - 0 + "k";
        }
      },
      inside: true,
      margin: 0
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: "#f2f2f2",
        width: 0.5
      }
    }
  }],
  series: [{
    name: queryParam.word,
    data: queryParam.wordData,
    type: "line",
    showSymbol: false,
    smooth: true,
    lineStyle: {
      normal: {
        color: "#3DC8F7"
      }
    },
    areaStyle: {
      normal: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(61, 200, 247, 0.1)' // 0% 处的颜色
          }, {
            offset: 1, color: '#fff' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    },
    showAllSymbol: true,
    symbolSize: 1,
    label: {
      normal: {
        textStyle: {
          fontSize: 16,
          color: "#3dc8f7",
          zlevel: 10
        },
        show: false,
        position: "top"
      }
    }
  }],
  tooltip: {
    trigger: "axis",
    zlevel: 0,
    confine: true,
    z: 0,
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "#999"
      }
    },
    backgroundColor: "#43495d",
    textStyle: {
      fontWeight: "bolder",
      align: "left"
    },
    formatter: ""
  },
  color: ["#3dc8f7", "#2cc000", "#ffad33"],
  calculable: true,
} , true);
      })();

</script>
  </body>
</html>